import _ from 'lodash'
import './style.css';
import Lion from './lion.png';
import printMe from './print.js';
function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack1'], ' ');
  element.classList.add('hello');

  var btn = document.createElement('button');

  var p = document.createElement('p')

  var myIcon = new Image();
  myIcon.src = Lion;

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  p.appendChild(myIcon);

  element.appendChild(p);
  element.appendChild(btn);
  return element;
}

// 启用了 HMR 后发现 绑定的还是原来的printMe， 因此当更新的时候我们要重新绑定
// document.body.appendChild(component());

let element = component(); // Store the element to re-render on print.js changes
document.body.appendChild(element);

if (module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    // printMe();
    document.body.removeChild(element);
    element = component(); // Re-render the "component" to update the click handler
    document.body.appendChild(element);
  })
}